import { NSlider } from "naive-ui";
import type { SliderProps } from "naive-ui";
import type { BaseComponentType, OmitHTMLAttributes } from "../types";
import { getSlotsDom } from "../utils";

export type SliderFactoryConstructorType = {
  props?: SliderProps;
  attrs?: OmitHTMLAttributes<"onDragstart" | "onDragend">;
  thumbSlot?: BaseComponentType;
};
export class SliderFactory {
  private attrs: OmitHTMLAttributes<"onDragstart" | "onDragend"> = {};
  private props: SliderProps = {};
  private thumbSlot: BaseComponentType = null;
  constructor(data?: SliderFactoryConstructorType) {
    if (data?.props) this.setProps(data.props);
    if (data?.attrs) this.setAttrs(data.attrs);
    if (data?.thumbSlot) this.setThumb(data.thumbSlot);
  }
  setProps(props: SliderProps) {
    this.props = props;
    return this;
  }
  setAttrs(attrs: OmitHTMLAttributes<"onDragstart" | "onDragend">) {
    this.attrs = attrs;
    return this;
  }

  setThumb(component: BaseComponentType) {
    this.thumbSlot = component;
    return this;
  }

  create() {
    return (
      <NSlider {...this.attrs} {...this.props}>
        {{
          thumb: () => getSlotsDom(this.thumbSlot),
        }}
      </NSlider>
    );
  }
}
